<!--新增资料分类-->
<template>
  <div class="app-container">
    <el-form :model="postForm" :rules="rules" ref="postForm" label-width="220px" label-position="right">
      <el-form-item label="顺序：" prop="sort">
        <el-input min="0" type="number" v-model="postForm.sort" placeholder="请输入顺序" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="类别名称：" prop="name">
        <el-input v-model="postForm.name" :maxlength=20 placeholder="请输入类别名称" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-check" @click="submitForm">保存</el-button>
        <el-button type="info" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { createDatumCat, getOneDatumCat } from '@/api/datum'
  const postForm = {
    sort: '',
    name: '', // 类别名称
    datumCatId: null
  }
  // const rules = {
  //   sort: [{ required: true, message: '请输入顺序号', trigger: 'submitForm' }],
  //   sortName: [{ required: true, message: '请输入课程分类名称', trigger: 'submitForm' }]
  // }
  export default {
    data() {
      return {
        postForm: Object.assign({}, postForm),
        rules: {
          sort: [{required: true, message: '请输入顺序号', trigger: 'submitForm'}],
          name: [{required: true, message: '请输入课程分类名称', trigger: 'submitForm'}]
        }
      }
    },
    mounted() {
      this.initData()
    },
    watch: {
      // 监听路由名称变化 重新调用数据
      $route: function(to, from) {
        console.log(to)
        if (to.name == 'edit') {
          this.initData()
        }
      }
    },
    methods: {
      initData() {
        this.postForm.datumCatId = this.$route.params.sortId
        console.log(this.$route.params)
        if (this.postForm.datumCatId) {
          getOneDatumCat(this.postForm.datumCatId).then(res => {
            console.log(res.data)
            this.postForm = res.data.data
          }).catch(err => {
            console.log(err)
          })
        }
      },
      close() {
        this.$store.dispatch('delVisitedViews', this.$route).then((views) => {
          const latestView = views.slice(-1)[0]
          console.log(latestView)
          const activeName = localStorage.getItem('datumBar')
          const isEdit = this.$route.params.isEdit
          const datumId = this.$route.params.datumId
          console.log(isEdit)
          if (latestView) {
            if (isEdit != undefined) {
              if (isEdit && datumId) {
                this.$router.push({ path: `/datum/editDatum/${datumId}` })
              } else {
                this.$router.push({ path: `/datum/createDatum` })
              }
            } else {
              this.$router.push({ name: 'datums', params: { activeName: activeName }})
            }
          } else {
            this.$router.push('/')
          }
        })
      },
      cancel() {
        this.close()
      },
      submitForm() {
        this.$refs.postForm.validate(valid => {
          if (valid) {
            createDatumCat(this.postForm).then(res => {
              console.log(res.data)
              if (res.data.statusCode == 200) {
                console.log(res.data)
                this.$message({
                  type: 'success',
                  message: res.data.data.msg
                })
                this.close()
              } else {
                console.log(res.data.msg)
                this.$message({
                  type: 'error',
                  message: res.data.msg
                })
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log('0')
          }
        })
      }
    }
  }
</script>
<style scoped>

</style>
